<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="box">Hello JQuer</div>
		<script src="../../jquery-1.12.4.min.js"></script>
		<script>
			//原生js
//						var div=document.getElementById('box');
//						div.onmouseover=function(){
//							div.style.background='greenyellow';
//						};
//						div.onmouseout=function(){
//							div.style.background='white';
//						};
			//jquery
//			$('#box').mouseover(
//				function() {
//					$('#box').css('background', 'greenyellow');
//				}
//			);
//			$('div').mouseout(
//				function() {
//					$('div').css('background', 'white');
//				}
//			);
			//jquery同时绑定多个事件
			$('div').on(
				{
					mouseover:function(){
						$('div').css('background','red');
					},
					mouseout:function(){
						$('div').css('background','yellow');
					},
					click:function(){
						$('div').css('background','black');
					}
				}
			);
		</script>
	</body>

</html>